<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>进货员年度进货量统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/css/public.css" media="all" />
    <link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css" media="all" />
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css" media="all" />
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">选择年份:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="year" readonly="readonly" placeholder="yyyy">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        </div>
    </div>
</form>
<!-- 搜索条件结束 -->
<div id="container" style="width: 100%;height:400px;"></div>

<script type="text/javascript" src="/resources/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/resources/echarts/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/resources/layui/layui.js"></script>

<script type="text/javascript">
    layui.use([ 'jquery', 'layer', 'form', 'table','laydate'  ], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate=layui.laydate;

        laydate.render({
            elem:'#year',
            type:'year',
            value:new Date()     //默认值是选中当前年份
        });

        /**
         * 监听查询按钮
         */
        $("#doSearch").click(function(){
            getData();
        });

        /**
         * 加载年度数据
         * @param year
         */
        function getData(year) {
            var year=$("#year").val();
            if(year===""){
                year=new Date().getFullYear();
            }

            $.get("/stat//loadOperatePersonYearGradeStat",{year:year},function (data) {
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};

                var option;

                option = {
                    title: {
                        text: '年度进货员进货统计',
                        subtext: '真实有效',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data.name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '进货量',
                            type: 'bar',
                            barWidth: '60%',
                            data: data.value
                        }
                    ]
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            })
        }

        $(function(){
            getData();
        })

    });

</script>
</body>
</html>